import React, { Component } from 'react';
import { connect } from 'dva';
import { Route, routerRedux } from 'dva/router';
import { TabBar, NavBar, Icon } from 'antd-mobile';
import { my_router, app_title, has_bottom, fix_scroll } from './app.less';
//import DevTools from '../../utils/DevTools';


class MyRoute extends Component {
  constructor(props) {
    super(props);
    this.touchstartY = 0;
    this.wrapper = '';
    this.wrapperTitle = '';
    this.state = {
     // selectedTab: 'redTab',
     // hidden: false,
    };
  }

  scrollnoStart = (ev) => {
    const events = ev.touches[0] || ev;
    this.touchstartY = events.clientY;
  }

  scrillnoMove = (ev) => {
    const events = ev.touches[0] || ev;
      if (events.clientY > this.touchstartY && (this.wrapper.scrollTop === 0)) {
       // console.log(this.touchstartY);
        ev.preventDefault();
      }
  }

  componentDidMount() {
    this.wrapper = document.getElementById('body');
    this.wrapperTitle = document.getElementById('title');
    if (this.wrapper) {
      this.wrapper.addEventListener('touchstart', this.scrollnoStart, false);
      this.wrapper.addEventListener('touchmove', this.scrillnoMove, false);
    }
    if (this.wrapperTitle) {
      this.wrapperTitle.addEventListener('touchstart', this.scrollnoStart, false);
      this.wrapperTitle.addEventListener('touchmove', this.scrillnoMove, false);
    }
  }

  componentWillUnmount() {
    console.log(this.wrapper);
    if (this.wrapper) {
    //  this.wrapper.removeEndEventListener('touchstart', this.scrollnoStart, false);
     // this.wrapper.removeEndEventListener('touchmove', this.scrillnoMove, false);
    }
    if (this.wrapperTitle) {
    //  this.wrapperTitle.removeEndEventListener('touchstart', this.scrollnoStart, false);
    //  this.wrapperTitle.removeEndEventListener('touchmove', this.scrillnoMove, false);
    }
  }


  render() {
    //console.log(this.wrapper.scrollTop);
  //  console.log(my_router);
   // const { hasButtom, hasTitle, buttomComponent, title='名食汇电商', titleComponent } = this.props.children.props.children[0].props;
    const { component: Component, hasScroll = true, hasBottom = false, hasTitle = true, buttomComponent, title = '名食汇电商', titleComponent, path, dispatch, bottomHeight = '1rem', topHeight = '0.9rem', ...rest } = this.props;

    const hasTitleSty = hasTitle == true ? { paddingTop: topHeight } : {};
    const hasBottomSty = hasBottom == true ? { paddingBottom: bottomHeight } : {};
    const hasScrollCla = hasScroll == true ? fix_scroll : '';

    return (
      <div>

        <Route
          {...rest}
          render={props => {
        return (
          <div className={my_router}>

            { hasTitle == true ?
              (
                <div id="title" style={{ height: topHeight }} className={app_title}>
                  {
                    titleComponent || <NavBar
                      mode="dark"
                      icon={<Icon type="left" />}
                      onLeftClick={() => {
                          dispatch(routerRedux.goBack());
                        }}
                      rightContent={[]}
                    >{title}
                    </NavBar>
                  }
                </div>
              ) : ''
            }


            <div id="body" style={{ ...hasTitleSty, ...hasBottomSty }} className={hasScrollCla}>
              <Component {...props} />
              {/*{ TOOL==="DEV" ? <DevTools /> : "" }*/}
            </div>

            { hasBottom == true ?
            (<div className={has_bottom} style={{ height: bottomHeight }}>
              { buttomComponent }
             </div>) : ''
          }
          </div>
        );
      }
      }
        />


      </div>
    );
  }
}


export default connect(({ MyRoute }) => ({ MyRoute }))(MyRoute);
